<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8">
    <title>添加品牌</title>
		<script th:src="@{/layui/layui.js}" type="text/javascript"></script>
		<link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
		<script type="text/javascript" th:src="@{/upload/js/publishImg.js}"></script>
	</head>
<body>
	
	<div class="layui-container" style="margin: 10px 0px;">
		
		<form class="layui-form layui-form-pane">

			<input type="hidden" name="picUrl" id="picUrl" th:value="${b.picUrl}">

			<input type="hidden" name="id" id="id" th:value="${b.id}">

			<div class="layui-form-item">
				<label class="layui-form-label">品牌商编号</label>
				<div class="layui-input-block">
					<input type="text" name="brandSn" th:value="${b.brandSn}" lay-verify="requied|brandSn" class="layui-input"   autocomplete="off"/>
				</div>
			</div>
			<!---->
			
			<div class="layui-form-item">
				<label class="layui-form-label">品牌商名称</label>
				<div class="layui-input-block">
					<input class="layui-input" lay-verify="required" name="name"  th:value="${b.name}" autocomplete="off" placeholder="请输入品牌商名称" />
				</div>
			</div>
			
			<!---->
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">底价</label>
					<div class="layui-input-inline">
						<input class="layui-input" name="floorPrice"  th:value="${b.floorPrice}" lay-verify="required" autocomplete="off" placeholder="     /￥" />
					</div>
				</div>
			</div>
			<!--图片-->

			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">品牌商图片</label>
					<div class="layui-input-inline" style="width: 225px;">
						<a class="layui-btn layui-btn-normal" id="checkPhoto">+</a>
						<div class="layui-upload-list" >
							<img th:src="@{'/file/fc/showImg/'+${b.picUrl}}" class="layui-upload-img" id="photo"
								 style="border: 1px solid #01AAED;border-radius: 4px;width: 100px;height: 100px" >
							<p id="photoText"></p>
						</div>
						<div style="width: 100px;margin: 5px;left: 10px;">
							<div class="layui-progress layui-progress-big" lay-showpercent="yes"
								 lay-filter="photoProgress">
								<div class="layui-progress-bar layui-bg-blue" lay-perent="20%"></div>
							</div>
						</div>

					</div>

				</div>
			</div>
			<!---->
			
			<div class="layui-form-item layui-form-text">
				<label class="layui-form-label">品牌商介绍</label>
				<div class="layui-input-block">
					<textarea id="demo"  class="layui-textarea" name="detail" th:text="${b.detail}"></textarea>
				</div>	
			</div>

			<!---->
			<div class="layui-form-item">
					<div style="text-align: center;display: none">
						<a class="layui-btn layui-btn-normal" id="submitBtn"  lay-submit="" lay-filter="submitBtn">
							<i class="layui-icon layui-icon-ok"></i>
							确定保存
						</a>
						<a class="layui-btn layui-btn-primary" id="cleanBtn">
							<i class="layui-icon layui-icon-fonts-clear"></i>
							清空重置
						</a>
					</div>
				</div>
			
		</form>
		
	</div>

	<script>
	
			
			var $;
			layui.use(['layedit','table','form','jquery','layer','upload','element'],function(){
    			$ = layui.jquery;	
    			var form = layui.form,
					upload = layui.upload,
					layer = layui.layer,
					element = layui.element,
					layedit = layui.layedit;
    			
    			//

				layedit.build(''); //建立编辑器
    			
    			

    			//图片上传
    			var photoUpload = upload.render({
    				elem:'#checkPhoto',
    				url:'/file/fc/fileUpload',
    				before:function(obj){
    					obj.preview(function(i,f,r){
    						$('#photo').attr('src',r);
    					});
    					element.progress('photoProgress','0%');
    				},
    				done:function(res){
    					if(!res.is){
    						layer.msg('上传失败，请稍后重试......');
    					}else{
    						$('#picUrl').val(res.file.id);
    						imgMove("imgZmList");
    					}
    				},
    				error:function(){
    					
    				},
    				progress:function(n,el,e){
    					element.progress('photoProgress',n+"%");
    					if(n==100){
    						layer.msg('上传完成！',{icon:1});
    					}
    				}
    			});

    			//添加
				form.on('submit(submitBtn)',function (data) {
					var formData =  data.field;
					console.log(formData);
					$.ajax({
						type:'post',
						url:'/brand/bc/update',
						data:formData,
						dataType:'json',
						success:function (result) {
							layer.msg(result.msg);
							if (result.is){
								let index = parent.layer.getFrameIndex(window.name);
								parent.layer.close(index);  //编辑成功后关闭父页面窗口
								parent.layui.table.reload('brandListTable');//根据表格id刷新父页面表格
							}
						}
					})
				})
    			
    			//清空
    			$('#cleanBtn').on('click',function(){
					$('.layui-form input').val("");
					$('.layui-textarea').val("");
				});

    	
			});

			function btnSubmit(){
				$('#submitBtn').click();
			}
			
			
	</script>
		
</body>
</html>
